<template>
  <el-dialog
    :before-close="beforeClose"
    :visible.sync="show"
    :title="title"
    width="400px"
    @close="close"
    @closed="closed"
  >
    <el-form ref="form" label-width="80px" :model="form">
      <el-form-item label="省">
        <el-select v-model="form.province" placeholder="请选择" class="k-width-100" @change="changeProvince">
          <el-option
            v-for="item in provinceList"
            :key="'province' + item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="市">
        <el-select v-model="form.city" placeholder="请选择" class="k-width-100" @change="changeCity">
          <el-option
            v-for="item in cityList"
            :key="'province' + item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="区">
        <el-select v-model="form.area" placeholder="请选择" class="k-width-100" @change="changeArea">
          <el-option
            v-for="item in areaList"
            :key="'province' + item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="街道">
        <el-select v-model="form.street" placeholder="请选择" class="k-width-100" @change="changeStreet">
          <el-option
            v-for="item in streetList"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="管理人">
        <el-select v-model="form.accountIds" multiple placeholder="请选择" class="k-width-100" @change="handleChange">
          <el-option
            v-for="item in adminList"
            :key="item.id"
            :label="item.user_name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.note" type="textarea" rows="5" maxlength="200" show-word-limit />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { create, edit } from '@/api/jurisdiction'
import select from '@/list/select'
export default {
  name: 'Index',
  mixins: [select],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'view'
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      show: false,
      header: '辖区',
      form: {
        id: '',
        province: '',
        city: '',
        area: '',
        street: '',
        province_name: '',
        city_name: '',
        area_name: '',
        street_name: '',
        accountIds: [],
        note: ''
      }
    }
  },
  computed: {
    title() {
      let text = ''
      switch (this.type) {
        case 'view':
          text = '查看'
          break
        case 'create':
          text = '新建'
          break
        case 'edit':
          text = '编辑'
          break
      }
      return text + this.header
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.show = val
        if (this.type === 'edit') {
          for (const formKey in this.form) {
            this.form[formKey] = this.data[formKey]
          }
          this.form = this.data
          this.getCity(this.form.province)
          this.getArea(this.form.province, this.form.city)
          this.getStreet(this.form.province, this.form.city, this.form.area)
          const list = this.data.admins.filter(v => {
            return v.id
          })
          console.log('管理人', list)
          const adminList = list.map(v => {
            return v.id
          })
          this.form.accountIds = [...adminList]
        }
      }
    }
  },
  mounted() {
    this.show = this.visible
    this.getProvince()
    this.getAdmin()
  },
  methods: {
    handleChange(value) {
      console.log(value)
      this.$forceUpdate()
    },
    getData() {
      console.log('获取数据')
    },
    handleClose() {
      console.log('点击关闭')
      this.beforeClose()
    },
    handleSubmit() {
      console.log('点击确定', this.form)
      if (this.type === 'create') {
        create(this.form).then(res => {
          console.log('res', res)
          this.$notify.success('添加成功')
          this.handleClose()
        })
      }
      if (this.type === 'edit') {
        edit(this.form).then(res => {
          console.log('res', res)
          this.$notify.success('保存成功')
          this.handleClose()
        })
      }
    },
    beforeClose() {
      console.log('关闭前的回调')
      this.show = false
      this.$emit('update:visible', false)
      this.$emit('refresh')
    },
    close() {
      console.log('关闭的回调')
    },
    closed() {
      console.log('关闭动画结束后的回调')
      this.form = {
        province: '',
        city: '',
        area: '',
        street: '',
        accountIds: [],
        note: ''
      }
    },
    changeProvince(val) {
      console.log('changeProvince', val)
      const Arr = this.provinceList.filter(v => {
        return v.code === val
      })
      this.form.province_name = Arr[0].name
      this.form.city_name = ''
      this.form.area_name = ''
      this.form.street_name = ''
      this.form.city = ''
      this.form.area = ''
      this.form.street = ''
      this.getCity(val)
    },
    changeCity(val) {
      console.log('changeCity', val)
      const Arr = this.cityList.filter(v => {
        return v.code === val
      })
      this.form.city_name = Arr[0].name
      this.form.area_name = ''
      this.form.street_name = ''
      this.form.area = ''
      this.form.street = ''
      this.getArea(this.form.province, val)
    },
    changeArea(val) {
      console.log('changeArea', val)
      const Arr = this.areaList.filter(v => {
        return v.code === val
      })
      this.form.area_name = Arr[0].name
      this.form.street_name = ''
      this.form.street = ''
      this.getStreet(this.form.province, this.form.city, val)
    },
    changeStreet(val) {
      console.log('changeStreet', val)
      const Arr = this.streetList.filter(v => {
        return v.code === val
      })
      this.form.street_name = Arr[0].name
    }
  }
}
</script>

<style scoped>

</style>
